<template>
    <div ref="statisticsRef" class="">
        <div class="flex gap-16px mt-16px">
            <insureData class="flex-1" title="销售数据" type="full" :list="Object.values(listInsure)"
                v-model:date-value="dateList" @change="getData" insure-type="dashBoardEleSign" />
            <insureData class="flex-1" title="运营数据" :list="Object.values(listOperate)" v-model:date-value="dateList1"
                @change="getData1" insure-type="dashBoardEleSign" />
        </div>
        <div class="flex gap-16px mt-16px">
            <signTrendData show-legend class="flex-1 flex-shrink !h-303px" insure-type="dashBoardEleSign"
                :query-data="queryData" />
            <chartSaleTrend show-legend title="近七日充值趋势" type="recharge" class="flex-1 flex-shrink !h-303px"
                insure-type="dashboardEleSign" :query-data="queryData" />
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, onActivated } from 'vue'
import insureData from '@/views/clients/dealClient/components/insureData.vue'
import signTrendData from '@/views/clients/dealClient/components/signTrendData.vue'
import chartSaleTrend from '../../components/chartSaleTrend.vue'
import { getEleSalesData, getEleOperateData } from '@/api/dashboard/eleSign.ts'

const props = defineProps({
    queryData: {
        type: Object,
        default() {
            return {}
        }
    }
})

const chartBarRef = ref(null)
const chartPieRef = ref(null)

const statisticsRef = ref(null)

const dateList = ref([])

const dateList1 = ref([])

const listInsure = ref({
    rechargeAmount: {
        name: '充值金额',
        hint: '',
        value: '',
        suffix: '元',
        icon: 'bar1',
        decimal: 2
    },
    rechargeCopies: {
        name: '充值份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar4'
    },
})

const listOperate = ref({
    notSign: {
        name: '待签署份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar1'
    },
    sign: {
        name: '已签署份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar2'
    },
    signingFailed: {
        name: '签署失败份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar3'
    },
    surplus: {
        name: '剩余份数',
        hint: '',
        value: '',
        suffix: '份',
        icon: 'bar4'
    },
})

const resize = () => {
    console.log(1234)
    chartBarRef.value.resize()
    chartPieRef.value.resize()
}


const getData = () => {
    getEleSalesData({
        startTime: dateList.value?.length ? dateList.value[0] : '',
        endTime: dateList.value?.length ? dateList.value[1] : '',
        ...props.queryData
    }).then(res => {
        for (const key in listInsure.value) {
            listInsure.value[key].value = res[key]
        }
    })
}

const getData1 = () => {
    getEleOperateData({
        startTime: dateList1.value?.length ? dateList1.value[0] : '',
        endTime: dateList1.value?.length ? dateList1.value[1] : '',
        ...props.queryData
    }).then(res => {
        for (const key in listOperate.value) {
            listOperate.value[key].value = res[key]
        }
    })
}

defineExpose({
    statisticsRef,
    resize,
    getData,
    getData1
})

onMounted(() => {
    // getData()
    // getData1()
})
</script>
<style lang="scss" scoped>
.h-300 {
    height: 303px;
}
</style>